<template>
  <div id="content" v-if="currentTCM">
    <div class="herbal_name">
      <a-tooltip content="学名" background-color="#165DFF">
        <div class="zh_name">
          {{ currentTCM.name }}
        </div>
      </a-tooltip>
      <a-tooltip content="拼音" background-color="#165DFF">
        <div class="en_name">
          {{ currentTCM.spell }}
        </div>
      </a-tooltip>
    </div>
    <div class="herbal_image">
      <a-image
          width="400"
          :src="currentTCM.url"
      />
    </div>
    <div class="description">
      <a-space direction="vertical" size="large" fill>
        <a-descriptions :data="currentDesc" title="信息" layout="vertical" :column="{xs:1, md:3, lg:4}" bordered>
        </a-descriptions>
      </a-space>
    </div>
    <!--          <a-descriptions-item v-for="item in currentDesc" :label="item.label" :span="item?.span ?? 10">-->
    <!--            <a-tag>{{ item.value }}</a-tag>-->
    <!--          </a-descriptions-item>-->
  </div>
  <div class="no-data" v-else>
    <div class="herbal_name">
      <a-skeleton animation>
        <a-space direction="vertical" :style="{width:'100%'}" size="large">
          <a-skeleton-line :rows="3" />
          <a-skeleton-shape />
        </a-space>
      </a-skeleton>
    </div>
  </div>

</template>
<script setup lang="ts">
import {onBeforeMount, onMounted, reactive, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {useRoute} from "vue-router";
import {router} from "../router";
import FlyWeather from "./fly-weather.vue";

const route = useRoute()
const data = reactive([]);
const currentIndex = ref(0);
const currentDesc = ref()
const currentTCM = ref()

const getTCMById = () => {
  myAxios.get(`/medicine?id=${route.params.id}`).then(res => {
    currentDesc.value = getCurrentDesc(res.data)
  })
}
const getCurrentDesc = (TCMInfo) => {
  currentTCM.value = {
    name: TCMInfo.name,
    spell: TCMInfo.spell,
    url: "src/assets/images/image/" + TCMInfo.imageAddress.split("\\")[1]
  }
  return [
    // {
    //   label: "学名",
    //   value: TCMInfo.name,
    //   span: 6
    // },
    {
      label: "英文名",
      value: TCMInfo.englishName,
      span: 1
    },
    // {
    //   label: "拼音",
    //   value: TCMInfo.spell,
    // },
    {
      label: "拉丁名",
      value: TCMInfo.latinName,
    },
    {
      label: "类别",
      value: TCMInfo.classify,
    },
    {
      label: "产地分布",
      value: TCMInfo.placeOfOrigin,
    }, {
      label: "药材性状",
      value: TCMInfo.medicineCharacter,
      span: 4
    }, {
      label: "品质",
      value: TCMInfo.quality,
    }, {
      label: "药材性味",
      value: TCMInfo.propertyAndFlavor
    }, {
      label: "功效",
      value: TCMInfo.effect
    }, {
      label: "来源",
      value: TCMInfo.source
    }
  ]
}


onMounted(() => {
  getTCMById()
})
</script>
<style scoped>
#content {
  width: 100%;
  height: 100%;
}
.no-data {
  width: 100vw;
  height: 100vh;
}

.no-data .herbal_name {
  margin: 0 auto;
  padding-top: 20vh;
}

.herbal_name {
  width: 50vw;
  height: 40vh;
  text-align: center;
  letter-spacing: 1rem;
}

.zh_name {
  position: relative;
  top: 7rem;
  left: 4rem;
  font-size: 3rem;
  cursor: pointer;
}

.en_name {
  position: relative;
  top: 10rem;
  left: 4rem;
  font-size: 1.5vw;
  cursor: pointer;
}

.herbal_image {
  position: absolute;
  top: 10%;
  right: 15%;
}

.description {
  width: 90vw;
  margin: 0 4rem;
  height: 50vh;
  padding-bottom: 4rem;
  overflow: scroll;
}

.description > ul {
  list-style: none;
  color: white;
  display: flex;
  justify-content: space-evenly;
  cursor: pointer;
}

.description > ul > li:hover {
  font-size: 1vw;
  text-decoration: underline;
}

.description > ul > li.active {
  color: #535bf2;
}

.pre {
  position: absolute;
  top: 50vh;
  color: black;
  user-select: none;
}

.pre:hover {
  scale: 1.5;
  cursor: pointer;
}

.next {
  position: absolute;
  top: 50vh;
  right: 0;
  color: black;
  user-select: none;
}

.next:hover {
  scale: 1.5;
  cursor: pointer;
}

</style>
